<template>
  <div class="containerPAr">
    <div class="left"></div>
    <div class="right">
      <div class="resizeLine" @mousedown="mousedown($event)"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    mousedown(e) {
      let node = e.target.parentElement;
      let width = node.offsetWidth;
      let x = e.x;
      window.onmousemove = (event) => {
        console.log(event);
        node.style.flex = "0 1  auto";
        node.style.width = width + (x - event.x) + "px";
      };
      window.onmouseup = (event) => {
        window.onmousemove = null;
        window.onmouseup = null;
      };
    },
  },
};
</script>

<style lang='less' scoped>
.containerPAr {
  width: 100%;
  height: 100%;
  display: flex;
  & > div {
    flex: 1;
    min-width: 0;
    height: 100%;
    background-color: pink;
  }
  & > div:nth-of-type(2) {
    background-color: black;
    position: relative;
  }
  .resizeLine {
    width: 3px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: red;
    cursor: col-resize;
  }
}
</style>